<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>角色管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="${applicationScope.basePath}/static/bootstrap/css/bootstrap.css">
    <script src="${applicationScope.basePath}/static/js/jquery-3.3.1.min.js"></script>
    <script src="${applicationScope.basePath}/static/bootstrap/js/bootstrap.js"></script>

    <style>
        td {
            vertical-align: middle !important;
        }

        .row {
            margin-bottom: 30px;
        }

        th {
            text-align: center;
        }

        #add {
            margin: 0 50px;
        }
    </style>
</head>
<body>
<!-- <h1>你好，世界！</h1> -->
<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="${applicationScope.basePath}/system/user/to_main" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">系统管理</li>
                <li class="active">角色管理</li>
            </ol>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- 右为普通导航条 -->
            <!--<a class="btn btn-default" href="#" role="button" id = "msg">Link</a>-->
            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href="#">当前用户:<span class="badge">小明</span></a></li>-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">当前用户:<span class="badge">${sessionScope.user.userName}</span><span class="caret"></span></a>
                    <ul class="dropdown-menu"><!-- -->
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">个人详情</a></li>
                    </ul>
                </li>
                <li><!-- -->
                    <a href="${applicationScope.basePath}/system/user/login_out"><span class="glyphicon glyphicon glyphicon-lock" aria-hidden="true"></span>注销</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-6">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">是否可用</span>
                <select class="form-control" id="searchState">
                    <option value="2" ${requestScope.state==2?'selectd':''}>全部</option>
                    <option value="1" ${requestScope.state==1?'selectd':''}>可用</option>
                    <option value="0" ${requestScope.state==0?'selectd':''}>不可用</option>
                </select>
                <span class="input-group-addon">按名称搜索</span>
                <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord" value="${requestScope.words}"/>
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button" id="search">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </span>
            </div><!-- /input-group -->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" id="all-select">全选</button>
                    <button class="btn btn-info" id="inverse-select">反选</button>
                    <button class="btn btn-success" id="notall-select">全不选</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-primary" id="add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
                    </button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-danger" id="batch_delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <table class="table table-sm table-bordered table-hover text-center">
                <tr>
                    <th><input type="checkbox" id="main-type-id"/></th>
                    <th>文章标题</th>
                    <th>文章简介</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th>类型</th>
                    <th>发布者</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${requestScope.page.list}" var="article">
                    <tr>
                        <td><input type="checkbox" class="article-id" value="${article.newsId}"/></td>
                        <td>${article.newsTitle}</td>
                        <td>${article.newsSummary}</td>
                        <td><fmt:formatDate value="${article.newsPublishTime}" pattern="yyyy-MM-dd HH:mm:ss"/> </td>
                        <td>${article.newsState==0?'不可用':'可用'}</td>
                        <td>${article.articleType.typeName}</td>
                        <td>${article.systemUser.userTrueName}</td>
                        <td id="delAndUpdate">
                            <button class="btn btn-danger btn-sm" id="delete-${article.newsId}" data-article-id="${article.newsId}">
                                <!-- typeId -->
                                <span class="glyphicon glyphicon-trash delete" aria-hidden="true"></span> 删除
                            </button>
                            &nbsp;&nbsp;
                            <button class="btn btn-info btn-sm" id="update-${article.newsId}" data-article-id="${article.newsId}">
                                <span class="glyphicon glyphicon-pencil update" aria-hidden="true"></span> 修改
                            </button>

                            <button class="btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-list-alt detail" aria-hidden="true" data-article-id="${article.newsId}"></span> 详情
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-sm-offset-1">
            <div class="input-group input-group-sm" style="margin-top: 20px">
                <span class="input-group-addon">共计：${page.pages}页/${page.count}条记录，每页</span>
                <select class="form-control">
                    <option value="5" ${page.pageSize==5?'selected':''}>5</option>
                    <option value="10" ${page.pageSize==10?'selected':''}>10</option>
                    <option value="20" ${page.pageSize==20?'selected':''}>20</option>
                </select>
                <span class="input-group-addon">条，跳转到</span>
                <input type="text" class="form-control" placeholder="请输入页码数" id="pages">
                <span class="input-group-btn">
					<button class="btn btn-success btn-sm" type="button" id="jump">跳转
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span></button>
				</span>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1" style="margin-left:13%">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">
                    <c:if test="${page.pages!=0}">
                        <li ${page.isFirstPage?'class="disabled"':''}<a href="#" data-num="1">首页</a></li>
                        <li ${page.hasNextPage?'':'class="disabled"'}>
                            <a href="#" aria-label="Previous" data-num="${page.prePage}">
                                <span aria-hidden="true" >&laquo;</span>
                            </a>
                        </li>
                        <c:forEach items="${page.navigatePageNums}" var="navigatePageNum">
                            <li ${navigatePageNum==page.pageNum?'class="active disabled"':''}>
                                <a href="#" data-num="${navigatePageNum}">${navigatePageNum}</a>
                            </li>
                        </c:forEach>
                    </c:if>
                    <%--                    <li class="active disabled"><a href="#">1</a></li>--%>
                    <%--                    <li><a href="#">2</a></li>--%>
                    <%--                    <li><a href="#">3</a></li>--%>
                    <%--                    <li><a href="#">4</a></li>--%>
                    <%--                    <li><a href="#">5</a></li>--%>

                    <li ${page.hasNextPage?'':'class="disabled"'}>
                        <a href="#" aria-label="Next" data-num="${page.nextPage}">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li ${page.isLastPage?'class="disabled"':''}><a href="#" data-num="${page.pages}">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#all-select").on("click",function (){
        $(".article-id,#main-type-id").prop("checked",true);
    })

    $(".article-id").on("click",function (){
        $("#main-type-id").prop("checked",$(".article-id").length == $(".article-id:checked").length);
    })

    $("#notall-select").on("click",function () {
        $(".article-id,#main-type-id").prop("checked", false);
    })

    $("#inverse-select").on("click",function (){
        $.each($(".article-id"),function (i,n){
            $(n).prop("checked",!$(n).prop("checked"));
        })
        $("#main-type-id").prop("checked",$(".article-id").length == $(".article-id:checked").length);
    })

    $("#main-type-id").on("click",function (){
        $(".article-id").prop("checked",$(this).prop("checked"));
    })

    $("#add").on("click",function (){
        location.href = "${applicationScope.basePath}/system/article/to_add";
    })

    $("#search").on("click",function (){
        let state = $("#searchState").val();
        let words = $("#searchWord").val().trim();
        if(!(state == "${requestScope.state}" && words == "${requestScope.words}")){
            window.location.href="${applicationScope.basePath}/system/article/?newsState=" + state + "&newsTitle=" + words;
        }
    })

    $(".pagination").on("click","li a",function (){
        if($(this).parent().hasClass("disabled")){
            return false;
        }
        let num = $(this).data("num");
        window.location.href = "${applicationScope.basePath}/system/article/?" +
            "newsState=${requestScope.state}&newsTitle=${requestScope.words}" +
            "&pageNum=" + num + "&pageSize=${page.pageSize}";
    })

    $("#jump").on("click",function (){
        let pageText = $("#pageNum").val().trim();
        if(pageText == ""){
            pageText = "1";
        }
        let pageNum = parseInt(pageText);
        let pageSize = $("#pageSize").val();
        //
        if(!isNaN(pageNum) && pageNum >= 1 && pageNum <= "${page.pages}"
            && !(pageNum == "${page.pageNum}" && pageSize == "${page.pageSize}")){
            window.location.href = "${applicationScope.basePath}/system/article/?" +
                +"newsState=${requestScope.state}&newsTitle=${requestScope.words}" +
                "&pageNum=" + pageNum + "&pageSize=" + pageSize;
        }
    })

    $("#delAndUpdate button[id^=delete]").on("click",function (){
        let newsId = $(this).data("article-id");
        console.log("删除被点击了！" + newsId);
        if(confirm("是否删除这些信息？")){
            $.ajax({
                url:"${applicationScope.basePath}/system/article/delete",
                data:"newsId=" + newsId,
                type:"get",
                dataType:"json",
                success:function (result){
                    console.log(result);
                    if(result){
                        alert("删除成功!");
                        location.reload();
                    }else {
                        alert("删除失败!");
                    }
                }
            })
        }
    })

    $("#batch_delete").on("click",function (){
        let arr_id=[];
        $.each($(".article-id[type='checkbox']:checked"),function (i,n){
            arr_id.push('"'+$(n).val()+'"');
        })
        console.log(arr_id.join(","));
        let newsIds=arr_id.join(",");
        if(confirm("是否删除这些信息？")){
            $.ajax({
                url:"${applicationScope.basePath}/system/article/batch_delete",
                data:"newsIds=" + newsIds,
                type:"get",
                dataType:"json",
                success:function (result){
                    console.log(result);
                    alert("删除了" + result + "条数据!");
                    location.reload();
                }
            })
        }
    })
    $("#delAndUpdate button[id^=update]").on("click",function (e) {
        console.log(this);
        console.log(e.target);
        if (confirm("是否修改【"+$(this).data("newsId")+"】的信息？")){
            console.log("提交到后台的gid为:"+$(this).data("newsId"));
            window.location.href = "${applicationScope.basePath}/system/article/to_update?newsId==" +$(this).data("newsId");
        }
    })


</script>
</body>
</html>